<template>
    <div>
        <a-row :span="24">
            <a-col :span="18">
                <a-input-search v-model:value="companyName" placeholder="请输入公司信息" style="width: 200px; margin-bottom: 10px"
                    @search="onSearch()" />
            </a-col>
            <a-col :span="4">
                <a-dropdown :trigger="['click']">
                    <a class="ant-dropdown-link" :style="{ fontSize: '20px', color: 'black' }" @click.prevent>
                        <DashOutlined />
                    </a>
                    <template #overlay>
                        <a-menu>
                            <a-menu-item><a @click="expandAll">展开全部</a></a-menu-item>
                            <a-menu-item><a @click="collapseAll">折叠全部</a></a-menu-item>
                        </a-menu>
                    </template>
                </a-dropdown>
            </a-col>
        </a-row>
        <a-tree v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys" :tree-data="treeData" show-icon
            default-expand-all @select="openDash">
            <template #title="{ companyName }">
                <BankOutlined />
                {{ companyName }}
            </template>
        </a-tree>
        <!-- <el-tree :data="data" :props="{ label: 'fullName', children: 'children' }" :expand-on-click-node="false"
            :filter-node-method="filterNode" ref="companyTreeRef" highlight-current :default-expand-all="false"
            @node-click="handleNodeClick" /> -->
    </div>
</template>
<script setup>
import { BankOutlined, DashOutlined } from '@ant-design/icons-vue';
import { queryTree } from "../api/company"
const companyName = ref('')
const treeData = ref([])
const expandedKeys = ref([])
const props = defineProps({
    value: {
        type: [String, Number]
    }
})
const emit = defineEmits(['confirm'])
// 展开全部
function expandAll() {
    const allKeys = getAllNodeKeys(treeData.value)
    expandedKeys.value = allKeys
    console.log('expandedKeys', expandedKeys.value);
}
// 折叠全部
function collapseAll() {
    expandedKeys.value = []
}
// 辅助函数：获取所有节点的键
function getAllNodeKeys(tree) {
    const keys = []
    tree.forEach(node => {
        keys.push(node.id) // 假设节点的唯一标识为 id
        if (node.children && node.children.length > 0) {
            keys.push(...getAllNodeKeys(node.children))
        }
    })
    return keys
}
// 获取Tree
function buildWellTree() {
    queryTree().then(res => {
        //  console.log(res)
        treeData.value = res
    })
}
buildWellTree();
function openDash(key, e) {
    emit('confirm', e.node.id)
    // if(e.node.isLeaf){
    //     emit('confirm',e.node.id)
    //     // expandedKeys.value = expandedKeys.value.concat([e.node.value])
    // }
    // // 如果是非叶节点 模糊查询
    // else{
    //     emit('search',e.node.key)
    // }
}

/** 通过条件过滤节点  */
// const filterNode = (value, data) => {
//     console.log('filterNode', value, data);
//     // if (!value) return true;
//     // return data.companyName.indexOf(value) !== -1;
// };
/** 根据名称筛选部门树 */
// watch(companyName, (val) => {
//     // proxy.$refs["deptTreeRef"].filter(val);
// });
function onSearch() {

}
</script>